<template>
	<view class="content">
		<!-- 状态栏占位元素 -->
		<view class="custom-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 顶部导航栏 -->
		<view class="toptopNavigation" :style="{ height: navigationBarHeight + 'px' }">
			<view class="top_1" @click="pageReturn">
				<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20093826001.png" mode=""></image>
			</view>
			<view class="top_2">台词管理</view>
			<view class="top_3"></view>
		</view>

		<image @click="pageReturn" class="addTo" src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20183028013.png" mode=""></image>

		<u-empty marginTop="200" icon="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20182503012.png" text="暂无台词~" v-if="!lines.length"></u-empty>

		<view class="lines_box" v-else>
			<view class="line_item" v-for="(item, index) in lines" :key="index">
				<view class="top">{{ item.title || item.Text }}</view>
				<view class="content">{{ item.Text }}</view>
				<view class="bottom">
					<view class="bottom_l">{{ item.tiem }}</view>
					<image @click="setUp(index)" class="bottom_r" src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20183742015.png" mode=""></image>
				</view>
			</view>
		</view>

		<u-popup :show="isSetOpen" @close="isSetOpen = false" :round="10" bgColor="#F4F6FA">
			<view class="setUp_box">
				<view class="top">
					<view
						class="top_b"
						@click="
							isRename = true;
							isSetOpen = false;
						"
					>
						重命名标题
					</view>
					<view class="top_b" @click="editLines">编辑台词</view>
					<view
						class="top_b"
						@click="
							isdelete = true;
							isSetOpen = false;
						"
					>
						删除
					</view>
				</view>
				<view class="cancel" @click="isSetOpen = false">取消</view>
			</view>
		</u-popup>

		<u-overlay :show="isdelete" @click="isdelete = false">
			<view class="delete_box">
				<view class="delete_top">
					<view class="title">确定删除台词？</view>
					<view class="btn">
						<view class="cancel" @click="isdelete = false">取消</view>
						<view class="confirm" @click="erase">确定</view>
					</view>
				</view>
				<view class="delete_base"></view>
			</view>
		</u-overlay>

		<u-overlay :show="isRename">
			<view class="rename_box">
				<view class="rename_top">
					<view class="title">
						<textarea placeholder="自定义标题!" v-model="textContent" id="text_textarea" />
					</view>
					<view class="btn">
						<view class="cancel" @click="isRename = false">取消</view>
						<view class="confirm" @click="rename">确定</view>
					</view>
				</view>
				<view class="rename_base"></view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
import { systemInfo } from '@/utils/mixin.js';
export default {
	data() {
		return {
			lines: [],
			isSetOpen: false,
			isdelete: false,
			isRename: false,
			index: 0,
			textContent: ''
		};
	},
	onLoad() {
		this.lines = uni.getStorageSync('lines');
		this.getSystemInfo();
	},
	mixins: [systemInfo],
	methods: {
		pageReturn() {
			uni.navigateBack();
		},
		erase() {
			(this.isdelete = false), this.lines.splice(this.index, 1);
			uni.setStorageSync('lines', this.lines);
		},
		editLines() {
			uni.setStorageSync('textTheRaise', this.lines[this.index].Text);
			uni.navigateBack();
		},
		rename() {
			this.isRename = false;
			let lines = this.lines;
			lines[this.index].title = this.textContent;
			this.lines = lines;
			uni.setStorageSync('lines', lines);
		},
		setUp(index) {
			this.index = index;
			this.isSetOpen = true;
		}
	}
};
</script>

<style lang="scss">
.rename_box {
	margin: auto;
	.rename_top {
		box-sizing: border-box;
		padding: 35rpx 36rpx;
		width: 571rpx;
		height: 348rpx;
		background: linear-gradient(180deg, #f3f7ff 0%, #f3f5fa 100%);
		border-radius: 38rpx;
		position: absolute;
		z-index: 9;
		.title {
			width: 100%;
			margin-bottom: 25rpx;
			#text_textarea {
				box-sizing: border-box;
				padding: 25rpx;
				width: 100%;
				height: 199rpx;
				background: #ffffff;
				border-radius: 14rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #2f2f2f;
			}
		}
		.btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cancel {
				width: 194rpx;
				height: 65rpx;
				border-radius: 7rpx;
				border: 2rpx solid #2957d1;
				font-weight: 400;
				font-size: 25rpx;
				color: #2957d1;
				line-height: 65rpx;
				text-align: center;
			}
			.confirm {
				width: 275rpx;
				height: 65rpx;
				background: #2957d1;
				border-radius: 7rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #ffffff;
				line-height: 65rpx;
				text-align: center;
			}
		}
	}
	.rename_base {
		position: relative;
		top: 0;
		left: 0;
		width: 571rpx;
		height: 348rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 38rpx;
		transform: rotate(5deg);
	}
}
.delete_box {
	margin: auto;
	.delete_top {
		box-sizing: border-box;
		padding: 47rpx 36rpx;
		width: 571rpx;
		height: 348rpx;
		background: linear-gradient(180deg, #f3f7ff 0%, #f3f5fa 100%);
		border-radius: 38rpx;
		position: absolute;
		z-index: 9;
		.title {
			width: 100%;
			font-weight: 400;
			font-size: 29rpx;
			color: #2f2f2f;
			text-align: center;
			margin: 72rpx 0;
		}
		.btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cancel {
				width: 194rpx;
				height: 72rpx;
				border-radius: 7rpx;
				border: 2rpx solid #666666;
				font-weight: 400;
				font-size: 25rpx;
				color: #666666;
				line-height: 72rpx;
				text-align: center;
			}
			.confirm {
				width: 275rpx;
				height: 72rpx;
				background: #fa5151;
				border-radius: 7rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #ffffff;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}
	.delete_base {
		position: relative;
		top: 0;
		left: 0;
		width: 571rpx;
		height: 348rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 38rpx;
		transform: rotate(5deg);
	}
}
.setUp_box {
	box-sizing: border-box;
	padding: 41rpx 36rpx;
	.top {
		margin: auto;
		width: 678rpx;
		background: #ffffff;
		border-radius: 14rpx;
		.top_b {
			width: 100%;
			height: 85rpx;
			background: #ffffff;
			border-radius: 14rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #000000;
			line-height: 85rpx;
			text-align: center;
		}
	}
	.cancel {
		margin: auto;
		width: 678rpx;
		height: 85rpx;
		background: #ffffff;
		border-radius: 14rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #000000;
		line-height: 85rpx;
		text-align: center;
		margin-top: 20rpx;
	}
}
.lines_box {
	width: 678rpx;
	margin: auto;
	.line_item {
		margin-bottom: 28rpx;
		box-sizing: border-box;
		padding: 28rpx 36rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 22rpx;
		.top {
			font-weight: 400;
			font-size: 29rpx;
			color: #2f2f2f;
			white-space: nowrap; /* 防止文本换行 */
			overflow: hidden; /* 隐藏超出容器的文本 */
			text-overflow: ellipsis; /* 超出部分显示省略号 */
			width: 75%;
		}
		.content {
			height: 70rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #666666;
			overflow: hidden; /* 隐藏超出容器的文本 */
			text-overflow: ellipsis; /* 超出部分显示省略号 */
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			width: 85%;
		}
		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.bottom_l {
				font-weight: 400;
				font-size: 22rpx;
				color: #9e9e9e;
			}
			.bottom_r {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}
.addTo {
	width: 90rpx;
	height: 90rpx;
	position: fixed;
	right: 40rpx;
	bottom: 300rpx;
}
page {
	background: #f7f9fd;
	background-image: url(https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20100657002.png);
	background-repeat: no-repeat;
	background-size: 100% 344rpx;
}

.content {
	// width: 93%;
}

.custom-status-bar {
	width: 100%;
}
.toptopNavigation {
	padding: 0 35rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.top_1 {
		width: 36rpx;
		height: 36rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top_2 {
		font-weight: 400;
		font-size: 33rpx;
		color: #2c2c2c;
	}
	.top_3 {
	}
}
</style>
